<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			请输入数值:<input type="text" v-model.number="num"/>
			请输入数值:<input type="number" v-model.number="num1" />
			<button @click="addNum" type="button">计算</button>
			<button @click="addNum1"type="button">number</button>
			<hr/>
			输入用户名:<input type="text" v-model.trim="username"/>
			<!-- trim去除前后空格 -->
			<button type="button"@click="nameSize">长度</button>
			{{length}}
			<hr/>
			<input type="text" v-model.lazy="msg" />左边些什么,右边写什么，左边写完失去焦点右边加载{{msg}}
			<!-- 当用户输入完成之后，失去焦点时触发懒加载 -->
		</div>
		<script src="../js/vue.js">		
		</script>
		<script type="text/javascript">
			const app = new Vue({
				el:"#app",
				data:{
					num:"",
					num1:"",
					length:"",
					msg:""
				},
				methods:{
					addNum(){
					// this.num=parseInt(this.num)+20	
					this.num+=20
					
					},
					addNum1(){
						this.num1+=20
					},
					nameSize(){
					this.length=this.username.length
					}
					
				}
				
			})
		</script>
	</body>
</html>
